<template>
  <div class="event">
    <a-card :bordered="false" class="event-btn" title="来源分析">
      <a-form ref="formRef" :model="formState" @finish="onFinish">
        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-item
              :name="`tiem`"
              :label="`时间`"
              :labelCol="{
                xs: { span: 24 },
                sm: { span: 2 }
              }"
              :wrapperCol="{
                xs: { span: 24 },
                sm: { span: 22 }
              }"
            >
              <a-radio-group v-model:value="formState[`timeType`]" button-style="solid">
                <a-radio-button value="1">2小时</a-radio-button>
                <a-radio-button value="2">24小时</a-radio-button>
                <a-radio-button value="3">当天</a-radio-button>
                <a-radio-button value="4">2天</a-radio-button>
                <a-radio-button value="5">3天</a-radio-button>
                <a-radio-button value="6">7天</a-radio-button>
                <a-radio-button value="7">30天</a-radio-button>
                <a-radio-button value="8">其他</a-radio-button>
              </a-radio-group>
              <a-range-picker
                class="ml-2"
                v-if="formState[`timeType`] == 8"
                v-model:value="formState[`time`]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="8" >
            <a-form-item
              :name="`host`"
              :label="`域名`"
              :labelCol="colState.labelCol"
              :wrapperCol="colState.wrapperCol"
            >
              <a-select v-model:value="formState[`host`]">
                <a-select-option value="jack">Jack</a-select-option>
                <a-select-option value="lucy">Lucy</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="16" >
            <a-form-item
              :name="`path`"
              :label="`访问路径`"
              :labelCol="col16State.labelCol"
              :wrapperCol="col16State.wrapperCol"
            >
              <a-input v-model:value="formState[`path`]"></a-input>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24" style="text-align: right">
            <a-button type="primary" html-type="submit">查询</a-button>
            <a-button style="margin: 0 8px" @click="onReset">重置</a-button>
           
          </a-col>
        </a-row>
      </a-form>
    </a-card>
    <a-card :bordered="false" class="event-body event-btn" title="数据概览">
      <BaseEcharts :options="options11" height="300px" />
    </a-card>
    <a-card :bordered="false" class="event-body" title="数据明细">
      <a-table
        :columns="columns"
        :data-source="data"
        :scroll="{ x: 800, y: 400 }"
        :pagination="pagination"
        @change="handleTableChange"
      >
      </a-table>
    </a-card>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref, computed } from 'vue'
import { type FormInstance, type TableColumnsType } from 'ant-design-vue'
import BaseEcharts from '@/components/baseEcharts/index.vue'
const formRef = ref<FormInstance>()
const formState = reactive<any>({
  timeType:"2",
})
const current = ref(1)
const pageSize = ref(10)
const pagination = computed(() => ({
  current: current.value,
  pageSize: pageSize.value,
  showTotal: (total: any) => `共 ${total} 条`,
  total: data.length,
  showSizeChanger: true
}))
const handleTableChange = (pag: any) => {
  current.value = pag.current
  pageSize.value = pag.cpageSizeurrent
}
const colState = reactive<any>({
  labelCol: {
    xs: { span: 24 },
    sm: { span: 6 }
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 18 }
  }
})
const col16State = reactive<any>({
  labelCol: {
    xs: { span: 24 },
    sm: { span: 3 }
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 21 }
  }
})
const onReset = () => {
  if (formRef.value) {
    formRef.value.resetFields()
  }
}
const onFinish = (values: any) => {
  console.log('Received values of form: ', values)
  console.log('formState: ', formState)
}

const columns: TableColumnsType = [
  { title: '序号', width: 100, dataIndex: 'id', key: 'id', fixed: 'left',align:"center" },
  { title: '来源', dataIndex: 'referer', key: 'referer', width: 150 },
  { title: '时间', dataIndex: 'time', key: 'time', width: 110 },
  { title: '域名', dataIndex: 'host', key: 'host', width: 100 },
  { title: '路径', dataIndex: 'path', key: 'path', width: 150 },
  { title: '访问数', dataIndex: 'count', key: 'count', width: 100 },
  { title: 'CKF数', dataIndex: 'ckf', key: 'ckf', width: 100 },
  { title: 'JA3数', dataIndex: 'ja3', key: 'ja3', width: 100 },
  { title: 'JA4数', dataIndex: 'ja4', key: 'ja4', width: 100 },
  { title: 'IP数', dataIndex: 'ip', key: 'ip', width: 100 }
]

interface DataItem {
  id: number
  referer: string
  time: string
  host: string
  path: string
  count: number
  ckf: number
  ja3: number
  ja4: number
  ip: number
}

const data: DataItem[] = []
for (let i = 0; i < 100; i++) {
  data.push({
    id: i,
    referer:"来源"+i,
    time: '2014-12-27 12',
    host: 'asdajk.com',
    path: '/nacos/index.html',
    count: getRandomInt(1, i * 100),
    ckf: getRandomInt(1, i * 100),
    ja3: getRandomInt(1, i * 100),
    ja4: getRandomInt(1, i * 100),
    ip: getRandomInt(1, i * 100)
  })
}
function getRandomInt(min: any, max: any) {
  min = Math.ceil(min)
  max = Math.floor(max)
  return Math.floor(Math.random() * (max - min + 1)) + min
}
const options11 = {
  tooltip: {
    trigger: 'axis',
  },

  grid: {
    top: '3%',
    left: '4%',
    right: '3%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: 0,
    axisLine: {
      show: false,
      lineStyle: {
        color: '#A1A7B3',
        width: 0.5
      }
    },
    axisLabel: {
      show: true,
      interval: 0,
      rotate: 35
    },
    data: [
      '来源1',
      '来源2',
      '来源3',
      '来源4',
      '来源5',
      '来源6',
      '来源7',
    ]
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '访客',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'CKF',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'JA3',
      type: 'line',
      stack: 'Total',
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: 'JA4',
      type: 'line',
      stack: 'Total',
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: 'IP',
      type: 'line',
      stack: 'Total',
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
}
</script>
<style lang="less">
.event {
  .ant-form-item {
    margin-bottom: 12px;
  }
  .event-body {
    .ant-card-body {
      padding: 0px;
    }
  }
  .event-btn {
    margin-bottom: 10px;
  }
}
</style>
